<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="false" >
			<block slot="left">
				<view class="flex justify-between " >
					<image :src="imgUrl + '/images/tianjia.png'" mode="aspectFill" class="image-slot" @click="GotoPopfriends"></image>
					<image :src="imgUrl + '/images/contact.png'" mode="aspectFill" class="image-slot" @click="Gotocontacted"></image>
				</view>				
			</block>
			<block slot="content">消息中心</block>
		</cu-custom>
		<!-- <view class="grid-box">
			<u-grid :col="3" :border="false" @click="toNav">
				<u-grid-item index="1">
					<u-badge :count="msgNum.thumb_collect" :offset="[10, 50]"></u-badge>
					<image class="nav-icon" :src="imgUrl + '/images/icon/souc.png'"></image>
					<view class="grid-text">赞和收藏</view>
				</u-grid-item>
				<u-grid-item index="2">
					<u-badge :count="msgNum.follow" :offset="[10, 50]"></u-badge>
					<image class="nav-icon"  :src="imgUrl + '/images/icon/gz.png'"></image>
					<view class="grid-text">新增关注</view>  
				</u-grid-item>
				<u-grid-item index="3">
					<u-badge :count="msgNum.comment" :offset="[10, 50]"></u-badge>
					<image class="nav-icon" :src="imgUrl + '/images/icon/pl.png'"></image>
					<view class="grid-text">评论</view>
				</u-grid-item>
			</u-grid>
		</view> -->
		
		
		<!-- <view class="msg-wrap">
			<view class="title">
				<view class="left">私信</view>
			</view>
			<block v-if="msgNum.article_msg_list.length > 0">
				<navigator @longpress="onPressArticle(item.m_id, index)"
					:url="'/pages/webview/webview?src=' + item.content" class="msg-item"
					v-for="(item, index) in msgNum.article_msg_list" :key="index" @click="articleMsgState(item.m_id)">
					<view class="avatar-box">
						<u-badge v-if="item.status == 0" :is-dot="true" :offset="[5, 10]" type="error"></u-badge>
						<u-avatar class="avatar" :src="item.user_info.avatar"></u-avatar>
					</view>
					<view class="right">
						<view>
							<text style="margin-right: 10rpx;">{{ item.user_info.username }}</text>
							<u-tag bg-color="#8687fd" text="官方" type="error" size="mini" mode="dark" />
						</view>
						<view class="desc">
							<text>{{ item.title }}</text>
							<text class="time">{{ item.create_time | timeFrom }}</text>
						</view>
					</view>
				</navigator>
			</block>
			<block v-if="msgNum.chat_msg_list.length > 0">
				<navigator @longpress="onPressChat(item.user_info.uid, index)"
					:url="'/pages/chat/chat?user=' + $f.tostring(item.user_info)" class="msg-item"
					v-for="(item, index) in msgNum.chat_msg_list" :key="index">
					<view class="avatar-box">
						<u-badge :count="item.count" :offset="[5, 10]" type="error"></u-badge>
						<u-avatar class="avatar" :src="item.user_info.avatar"></u-avatar>
					</view>
					<view class="right">
						<view>
							<text style="margin-right: 10rpx;">{{ item.user_info.username }}</text>
						</view>
						<view class="desc">
							<text>{{ item.msg.content }}</text>
							<text class="time">{{ item.msg.create_time | timeFrom }}</text>
						</view>
					</view>
				</navigator>
			</block>
			<block v-if="msgNum.chat_msg_list.length == 0 && msgNum.article_msg_list.length == 0">
				<view class="msg-empty">
					<image class="img" mode="widthFix" :src="imgUrl + '/empty.png'"></image>
					<text class="txt">暂无新消息</text>
				</view>
			</block>
		</view> -->
		
		
		<!-- 添加好友弹出层 -->
		<free-left-popup v-if="showleft" ref="extendpopup" :bodyWidth="285" :bodyHeight="325"
			bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="flex flex-column" 
			style="width: 285rpx;height: 325rpx;">
				<view class="flex-1 flex align-center" 
				hover-class="bg-hover-dark"
				v-for="(item,index) in extentsList"
				:key="index"
				@click="clickEvent(item)">
					<image class="margin-sm" style="width: 38rpx; height: 38rpx;" :src="item.icon"></image>
					<text class="font-md text-white">{{item.name}}</text>
				</view>
			</view>
		</free-left-popup>
		
		<!-- 置顶列表 -->
		<block v-for="(item,index) in chatlist" :key="index">
			<free-media-list v-if="item.istop" :item="item" :index="index"
			@long="long"></free-media-list>
		</block>
		<!-- 非置顶列表 -->
		<block v-for="(item,index) in chatlist" :key="index">
			<free-media-list v-if="!item.istop" :item="item" :index="index"
			@long="long"></free-media-list>
		</block>
		
		<!-- 弹出层 -->
		<free-popup ref="extend" :bodyWidth="240" :bodyHeight="getMenusHeight">
			<view class="flex flex-column" style="width: 240rpx;"
				:style="getMenusStyle">
				<view class="flex-1 flex align-center" 
				hover-class="bg-light"
				v-for="(item,index) in menus"
				:key="index"
				@click="clickEvent(item.event)">
					<text class="font-md pl-3">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
		
		
		<!-- 删除图文消息弹窗 -->
		<u-action-sheet :list="sheetList" v-model="showSheet" @click="onSheetItem"></u-action-sheet>
		<!-- 删除私信消息弹窗 -->
		<u-action-sheet :list="sheetList" v-model="showChatSheet" @click="onSheeChat"></u-action-sheet>
		<!-- tabbar -->
		<q-tabbar :active="3" :count="msgCount"></q-tabbar>
	</view>
</template>

<script>
	import freeBase from "@/components/mixin/free-base.js"
	import freeMediaList from "@/components/free-ui/free-media-list.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue";
	import freeBadge from "@/components/free-ui/free-badge.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeLeftPopup from "@/components/free-ui/free-left-popup.vue"
	
	export default {
		mixins:[freeBase],
		components: {
			freeMediaList,
			freeAvater,
			freeBadge,
			freePopup,
			freeLeftPopup
		},
		data() {
			return {
				imgUrl:this.$site.img_url,
				showSheet: false,
				showleft:true,
				showChatSheet: false,
				chatlist:[
					{
						istop:false,
						avatar:'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/background.png',
						noreadnum:'6',
						name:'你做好准备了吗',
						update_time:'1645366972',
						data:'前端小泽',
						istop:false
					},
					{
						istop:false,
						avatar:'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/background.png',
						noreadnum:'6',
						name:'我准备好了',
						update_time:'1645366972',
						data:'前端小魂',
						istop:false
					},
					{
						istop:false,
						avatar:'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/background.png',
						noreadnum:'6',
						name:'恍惚冲大关',
						update_time:'1645366972',
						data:'前端小徐',
						istop:true
					},
					{
						istop:false,
						avatar:'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/background.png',
						noreadnum:'6',
						name:'恍惚冲大关',
						update_time:'1645366972',
						data:'服务端',
						istop:true
					},
					{
						istop:false,
						avatar:'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/background.png',
						noreadnum:'6',
						name:'恍惚冲大关',
						update_time:'1645366972',
						data:'Pc前端',
						istop:true
					}
				],
				menus:[
					{
						name:"设为置顶",
						event:"setTop"
					},
					{
						name:"删除该聊天",
						event:"delChat"
					}
				],
				extentsList:[
					{
						name:"发起群聊",
						event:"navigateTo",
						path:'/pages/mail/mail/mail?type=createGroup',
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/chat-group.png"
					},
					{
						name:"添加好友",
						event:"navigateTo",
						path:'/pages/common/search/search',
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/add-user.png"
					},
					{
						name:"扫一扫",
						event:"scan",
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/search-one.png"
					},

				],
				sheetList: [{
					text: '删除',
					color: 'red'
				}],
				msgNum: {
					thumb_collect: 0,
					follow: 0,
					comment: 0,
					article_msg_list: [],
					chat_msg_list: []
				},
				checkedMsgId: '',
				checkedIndex: '',
				checkedMsgUid: ''
			};
		},
		computed: {
			msgCount() {
				return this.$store.state.messegeNum;
			},
			// 动态获取菜单高度
			getMenusHeight(){
				let H = 100
				return this.menus.length * H
			},
			// 获取菜单的样式
			getMenusStyle(){
				return `height: ${this.getMenusHeight}rpx;`
			}
		},
		onShow() {
			if (uni.getStorageSync('userInfo').uid) {
				this.getMsgNum();
			}
		},
		methods: {
			//聊天
			onClick(){
				uni.navigateTo({
					url: '/pages/chat/chat/chat?params='+encodeURIComponent(JSON.stringify({
						id:this.item.id,
						name:this.item.name,
						avatar:this.item.avatar,
						chat_type:this.item.chat_type,
					})),
				});
				this.chat.readChatItem(this.item.id,this.item.chat_type)
			},
			//长按弹窗
			long({x,y,index}){
				// 初始化 索引
				this.propIndex = index
				console.log('...........',this.propIndex);
				// 拿到当前对象
				let item = this.chatlist[index]
				// 判断之前是否处于置顶状态
				this.menus[0].name = item.istop ? '取消置顶' : '设为置顶'
				
				this.$refs.extend.show(x,y)
			},
			// 分发菜单事件
			clickEvent(event){
				switch (event){
					case "setTop": // 置顶/取消置顶会话
					this.setTop()
						break;
					case "delChat": // 删除当前会话
					this.delChat()
						break;
				}
				this.$refs.extend.hide()
			},
			// 删除当前会话
			delChat(){
				this.chatlist.splice(this.propIndex,1)
				let item = this.chatlist[this.propIndex]
				// this.chat.removeChatItem(item.id,item.chat_type)
			},
			// 置顶/取消置顶会话
			setTop(){
				let item = this.chatlist[this.propIndex]
				item.istop = !item.istop
			},
			
			//添加好友
			GotoPopfriends(){
				this.$refs.extendpopup.show(uni.upx2px(50),uni.upx2px(120))
				// this.$refs.extendpopup.show()
			},
			//通讯录
			Gotocontacted(){
				uni.navigateTo({
					url:'./contact-list/contact-list'
				})
			},
			// 更新阅读状态
			articleMsgState(id) {
				this.$H.post('message/articleMsgState', {
					post_id: id
				});
			},
			// 长按图文消息
			onPressArticle(id, index) {
				this.showSheet = true;
				this.checkedMsgId = id;
				this.checkedIndex = index;
			},
			// 长按私信
			onPressChat(uid, index) {
				this.showChatSheet = true;
				this.checkedIndex = index;
				this.checkedMsgUid = uid;
			},
			// 删除图文消息
			onSheetItem(index) {
				if (index == 0) {
					this.$H
						.post('message/delMsg', {
							id: this.checkedMsgId
						})
						.then(res => {
							if (res.code == 200) {
								this.msgNum.article_msg_list.splice(this.checkedIndex, 1);
							}
						});
				}
			},
			// 删除私信消息
			onSheeChat(index) {
				if (index == 0) {
					this.$H
						.post('message/delChat', {
							uid: this.checkedMsgUid
						})
						.then(res => {
							if (res.code == 200) {
								this.msgNum.chat_msg_list.splice(this.checkedIndex, 1);
							}
						});
				}
			},
			getMsgNum() {
				this.$H.post('message/num').then(res => {
					this.msgNum = res.result;
					this.$store.state.messegeNum = [0, 0, 0, res.result.all_count, 0];
				});
			},
			toNav(e) {
				uni.navigateTo({
					url: '/pages/message/list?type=' + e
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.image-slot{
		width: 40rpx; 
		height: 50rpx;
		margin: 20rpx 10rpx 0 20rpx;
	}
	.nav-icon {
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
	}

	.msg-wrap {
		background-color: #FFFFFF;
		margin-top: 20rpx;

		.title {
			margin: 20rpx;
		}

		.msg-item {
			padding: 20rpx;
			display: flex;

			.avatar-box {
				position: relative;

				.avatar {
					margin-right: 20rpx;

				}
			}

			.right {
				display: flex;
				flex-direction: column;
				flex: 1;

				.desc {
					font-size: 24rpx;
					color: #999;
					display: flex;

					.time {
						white-space: nowrap;
						margin-left: auto;
					}
				}
			}
		}
	}

	// 
	.msg-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 800rpx;

		.img {
			width: 200rpx;
			margin-top: 100rpx;
		}

		.txt {
			color: #999;
			font-size: 20rpx;
			margin-top: 20rpx;
		}
	}
	.grid-box{
		padding: 20rp 0;
	}
	.cuIcon-roundadd{
		font-family: "cuIcon";
		font-size: 40rpx;
		font-style: normal;
	}
.image-slot{
	width: 40rpx;
	height: 50rpx;
}
</style>
